<!doctype html>
<html>

	<head>
		<meta charset="UTF-8">
		<title></title>
		<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
		<link href="css/mui.min.css" rel="stylesheet" />
		<link href="css/zcy.userInfo.css" rel="stylesheet" />
		<link rel="stylesheet" href="css/mui.picker.css" />
		<link rel="stylesheet" href="css/mui.poppicker.css" />
		<style>
			body {
				background-color: #FFFFFF;
				height: 90%;
			}
			
			html {
				height: 90%;
			}
			
			.mui-picker {
				background-color: #FFFFFF;
				border: 1px solid!important;
			}
			
			li.highlight {
				font-size: 25px;
			}
			
			.div1 {
				position: absolute;
				z-index: 100;
				color: deepskyblue;
				font-weight: 700
			}
			
			.mui-poppicker-body {
				height: 300px;
			}
			.beijing{
				position: absolute;
				width: 100vw;
				margin-top: -2vw;
			}

		</style>
	</head>

	<body>

		<div id="userInfo"></div>

		<div class="mui-row" style="background-image: url(images/首页/设置页面/设置页面大图上.png);background-repeat:no-repeat; background-size: 98% auto; width:103%;position:absolute;z-index: 100;height: 60px;">
			<!--<label class=" div1" style="top:20%;width: 33.3%;font-size: 20px;height:20px;line-height:20px;text-align: center;">时长</label>-->
			<!--<label class="div1" style="top:20%;left:33.3%;width: 33.3%;font-size: 20px;height:20px;line-height:20px;text-align: center;">生词数</label>-->
			<!--<label class="div1" style="top:20%;left:66.6%;width: 33.3%;font-size: 20px;height:20px;line-height:20px;text-align: center;">生句数</label>-->
		</div>
		<div class="mui-row" style="background-image: url(images/首页/设置页面/设置页面大图下.png);background-repeat:no-repeat; background-size: 98% auto; width:103%;position:absolute;z-index: 100;height: 50px; margin-top: 260px;">
		</div>
		<script src="js/jquery-2.1.0.js"></script>
		<script src="js/jquery.cookie.js"></script>
		<script src="js/zcy.js"></script>
		<script src="js/mui.min.js"></script>
		<script src="js/mui.picker.js"></script>
		<script src="js/zcy.home.setting.mui.poppicker.js"></script>
		<script src="js/zcy.home.setting.pickerData.js"></script>
		<script type="text/javascript">
			mui.init()
			var picker = new mui.PopPicker({
				layer: 3
			});
			$(function() {
				showUserInfo('userInfo');

				picker.setData(data)
				picker.pickers[0].setSelectedValue("40");
				picker.pickers[1].setSelectedIndex(1);

				var pickers = $(".mui-picker");
				$(pickers[0]).css("border-radius", "5px 0 0 5px");
				$(pickers[1]).css("cssText", "width: 33.3333%;border-radius:0px;border-right:none !important;border-left:none !important");
				$(pickers[2]).css("border-radius", "0 5px 5px 0");

			})

			function changes(event) {
				var pickerDiv = $(event.currentTarget); //可以在此通过div来获取是第几个框
				var pickerId = pickerDiv.attr("id").replace("pickerList", "") - 1;
				var value = pickerDiv.find(".highlight").html();
				picker.pickers[2].setSelectedValue(value);
			}
		</script>
	</body>

</html>